<template>
  <view class="like">
    <cu-custom bgColor="bg-gradual-red" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">我的喜欢</block>
    </cu-custom>
    <view class="cu-load load-modal" v-if="loadModal">
      <!-- <view class="cuIcon-emojifill text-orange"></view> -->
      <image :src="imgUrl+'static/loading.gif'" mode="aspectFit"></image>
      <view class="gray-text">{{hint}}</view>
    </view>
    <view class="cu-timeline">
      <block v-if="likeData.length>0">
      <view class="cu-item text-red" v-for="(item,index) in likeData" :key="index">
        <view class="bg-gradual-red content shadow-blur" :data-id='item.article_id' @click='todetail'>
          <view class="cu-capsule radius">
            <view class="cu-tag bg-grey">{{item.like_time}}</view>
            <view class="cu-tag bg-orange">喜欢了</view>
          </view>

          <view class="cu-card article" :class="isCard?'no-card':''">
            <view class="cu-item shadow">
              <view class="content Car_content">
                <view class="desc">
                  <view class="text-content cite"> {{item.blog[0].article_title}}</view>
                </view>
                <image :src="item.blog[0].article_cover" mode="aspectFill" class="car_img"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
    <view class="noData" v-else>
      <image :src="imgUrl+'static/noNews.jpg'"  class="noImg" mode="aspectFit"></image>
      <text class="noTitle">暂无数据</text>
    </view>
    </view>
  </view>
</template>

<script>
  import util from '../../utils/util.js';
  export default {
    data() {
      return {
        imgUrl:getApp().globalData.imgUrl,
        loadModal: false, //加载
        pageInex: 1, //第一页
        pageSize: 10, //每页条数
        hint: '加载中...',
        user_id: null,
        isCard: true,
        likeData: {}
      }
    },

    onLoad: function(options) {
      let userInfo =getApp().globalData.userInfo;
      if (Object.keys(userInfo).length>0) {
        this.user_id = userInfo.user_id;
        this.getLike();
      } else {
        wx.navigateTo({
          url: '../login/login',
        })
      }
    },
    methods: {
      getLike(refresh='') {
        this.hint = refresh == 'below' ? '刷新中...' : '加载中...';
        this.loadModal = true;
        if (refresh == 'below') {
          this.likeData = {};
        } //清空列表
        wx.cloud.callFunction({
          name: 'getLike',
          data: {
            user_id: this.user_id,
            pageInex : this.pageInex,
            pageSize: this.pageSize
          },
          success: res => {
            this.loadModal = false;
            uni.stopPullDownRefresh();

            let list = res.result.list
            list.map(item => {
              item.like_time = util(parseInt(item.like_time));
            })
            this.likeData = this.pageInex == 1 ? list : [...this.likeData, ...list];
            if (list.length == 0) {
              uni.showToast({
                title: '没有更多数据了！',
                icon: 'none',
                duration: 2000
              })
            }
            // console.log(res)
          },
          fail: err => {
            console.error('[云函数] [getLike] 调用失败', err)
          },
        })
      },
      todetail(e) {
        wx.vibrateShort({})
        let id = e.currentTarget.dataset.id;
        uni.navigateTo({
          url: '../home/read?id=' + id,
        })
      }
    },
    onPullDownRefresh() { //下拉刷新
      this.pageInex = 1;
      this.getLike('below');
      // console.log('onPullDownRefresh');
    },
    onReachBottom() { //上拉加载
      this.pageInex = this.pageInex + 1;
      this.getLike('up');
      // console.log('onReachBottom');
    },
  }
</script>

<style>
  page{
    background: #fff;
  }
  .cu-card.article>.shadow{
    padding: 2rpx;
  }
  
  .cu-card.article>.cu-item .Car_content{
    padding-right: 0;
  }
  .cu-card.article>.cu-item .Car_content>.car_img{
    margin-right: 0;
  }
	.cu-card.article>.cu-item .content .text-content{
		height: 5.8em;
	}
	.cite{
		overflow: hidden;
		 -webkit-line-clamp: 4;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>
